<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/form-elements.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/layer.css">
    <style>
        body {
            background: url("img/bg.jpg") no-repeat fixed;
            background-size: cover;
            overflow: hidden;
        }

        /* 定义通用的绿色和红色样式 */
        .green {
            border: 2px solid green !important;
        }

        .red {
            border: 2px solid red !important;
        }

        /* 应用样式到所有相关输入框 */
        .form-email, .form-username, .form-password, .form-password2 {
            border: 2px solid transparent; /* 默认无边框颜色 */
        }
    </style>
</head>
<body>

<div class="container myBox">
    <div class="col-xs-8 col-xs-offset-4 col-sm-6 col-sm-offset-3 form-box">
        <div class="form-top">
            <div class="form-top-left">
                <h3>新用户注册</h3>
                <p>请输入您的信息:</p>
            </div>
            <div class="form-top-right">
                <i class="fa fa-key"></i>
            </div>
        </div>
        <div class="form-bottom">
            <form role="form" method="post" class="login-form">

                <!--上面的输入框尽可能不需要外边距，使用row解决-->
                <div class="row">
                    <div class="form-group">
                        <label class="sr-only" for="form-email">Email</label>
                        <input type="text" name="form-email" placeholder="邮箱" class="form-email form-control "
                               id="form-email">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-phone">Email</label>
                        <input type="text" name="form-phone" placeholder="手机号" class="form-phone form-control "
                               id="form-phone">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-username">Username</label>
                        <input type="text" name="form-username" placeholder="用户名" class="form-username form-control"
                               id="form-username">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-password">Password</label>
                        <input type="password" name="form-password" placeholder="密码"
                               class="form-password form-control"
                               id="form-password">
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="form-password2">Password</label>
                        <input type="password" name="form-password2" placeholder="确认密码"
                               class="form-password2 form-control"
                               id="form-password2">
                    </div>
                </div>
                <!--上面的输入框尽可能不需要外边距，使用row包裹起来解决-->


                <button type="submit" class="btn">注册</button>

                <div class="row">
                    <div style="padding: 10px 25px">
                        <div style="display: inline-block;float: left" class="text-left"><a
                                href="index.jsp">返回登录</a></div>
                        <!--<div style="display: inline-block;float: right" class="text-right"><a href="#">没有账号?</a></div>-->
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<!-- Javascript -->
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/js/jquery.backstretch.min.js"></script>
<script src="/js/layer.js"></script>

<script>
    // 定义一个通用的验证函数

    $('.form-username').blur(function () {
        var value = $(this).val();
        console.log(value);
        // 保存 this 的上下文
        var self = this;
        // 清除之前的样式
        $(self).removeClass("green red");
        if (value === "") {
            layer.msg("请输入内容", {icon: 2, time: 1000});
            return;
        }
        $.ajax({
            url: "/user/checkUsername",
            type: "POST",
            data: {
                username: value
            },
            success: function (data) {
                if (data.code === 200) {
                    $(self).addClass("green"); // 添加绿色样式
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000}); // 显示错误消息
                    $(self).addClass("red"); // 添加红色样式
                }
            },
            error: function (xhr, status, error) {
                // 处理 AJAX 请求失败的情况
                layer.msg("请求失败，请稍后再试", {icon: 2, time: 1000});
                $(self).addClass("red");
            }
        });
    });
    // 当输入框获得焦点时清除样式
    $('.form-username').focus(function () {
        $(this).removeClass("green red");
    });

    $('.form-email').blur(function () {
        var value = $(this).val();
        console.log(value);
        // 保存 this 的上下文
        var self = this;
        // 清除之前的样式
        $(self).removeClass("green red");

        // 定义邮箱的正则表达式
        var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

        if (value === "") {
            layer.msg("请输入邮箱", {icon: 2, time: 1000});
            $(self).addClass("red");
        } else if (!emailRegex.test(value)) {
            layer.msg("邮箱格式不正确", {icon: 2, time: 1000});
            $(self).addClass("red");
        } else {
            // 邮箱格式正确，通过 AJAX 验证邮箱是否已被使用
            $.ajax({
                url: "/user/checkEmail", // 后端接口地址
                type: "POST",
                data: {
                    email: value
                },
                success: function (data) {
                    if (data.code === 200) {
                        // 邮箱未被使用
                        $(self).addClass("green");
                        layer.msg(data.msg, {icon: 1, time: 1000});
                    } else {
                        // 邮箱已被使用
                        $(self).addClass("red");
                        layer.msg(data.msg, {icon: 2, time: 1000});
                    }
                },
                error: function (xhr, status, error) {
                    // 处理 AJAX 请求失败的情况
                    $(self).addClass("red");
                    layer.msg("请求失败，请稍后再试", {icon: 2, time: 1000});
                }
            });
        }
    });
    $('.form-email').focus(function () {
        $(this).removeClass("green red");
    });

    // 定义一个通用的密码验证函数
    function validatePasswords(selector1, selector2) {
        $(selector1).blur(function () {
            validatePasswordPair(selector1, selector2);
        });

        $(selector2).blur(function () {
            validatePasswordPair(selector1, selector2);
        });

        $(selector1).focus(function () {
            $(this).removeClass("green red");
            $(selector2).removeClass("green red");
        });

        $(selector2).focus(function () {
            $(this).removeClass("green red");
            $(selector1).removeClass("green red");
        });
    }

    // 具体的密码验证逻辑
    function validatePasswordPair(selector1, selector2) {
        var password1 = $(selector1).val();
        var password2 = $(selector2).val();

        // 清除之前的样式
        $(selector1).removeClass("green red");
        $(selector2).removeClass("green red");

        if (password1 === "") {
            layer.msg("请输入密码", {icon: 2, time: 1000});
            $(selector1).addClass("red");
        } else if (password2 === "") {
            layer.msg("请再次输入密码", {icon: 2, time: 1000});
            $(selector2).addClass("red");
        } else if (password1 !== password2) {
            layer.msg("两次密码不一致", {icon: 2, time: 1000});
            $(selector1).addClass("red");
            $(selector2).addClass("red");
        } else {
            $(selector1).addClass("green");
            $(selector2).addClass("green");
        }
    }

    // 调用函数，绑定事件
    validatePasswords('.form-password', '.form-password2');


    $('.login-form').submit(function () {
        event.preventDefault();
        $.ajax({
            url: "/user/register",
            type: "POST",
            data: $(this).serialize(),
            success: function (data) {
                if (data.code === 200) {
                    layer.msg("注册成功", {icon: 1, time: 1000}, () => {
                        window.location.href = "index.jsp";
                    });
                } else {
                    layer.msg(data.msg, {icon: 2, time: 1000});
                }
            }
        })
    })

</script>
</body>

</html>